<template>
    <div id="home">
        <el-container>
            <el-header>
                <header-nav/>
            </el-header>
                <el-main>
                    <router-view/>
                    <!--            尾部-->
                    <div class="footer">
                        <div class="bei_an">
                            <span>&copy;2020--zy博客</span>
                            <div>
                                <img src="../../assets/img/备案图标.png" alt="">
                                <span>
                                    <a href="http://www.beian.miit.gov.cn" target="_blank">豫ICP备20021797号</a>
                                </span>
                            </div>
                        </div>
                        <div class="profile_server">
                            <div>
                                <span>码云地址：</span>
                                <a href="https://gitee.com/zhangyucoder/">zhangyucoder</a>
                            </div>
                           <div>
                               <p>联系方式：1563537197 <img src="../../assets/img/QQ.jpg" alt=""></p>
                           </div>
                        </div>
                    </div>
                </el-main>
        </el-container>
    </div>
</template>

<script>
    import HeaderNav from "./homeComp/HeaderNav";
    export default {
        name: "Home",
        components:{
            HeaderNav,
        },
    }
</script>

<style scoped lang="less">
    #home{

    }
    .el-container{
        width:100%;
        height: 100vh;
    }
    .el-header {
        width: 100%;
    }
    .el-main{
        background:url("../../assets/img/home_back.jpg") no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
    .footer{
        margin-top: 1rem;
        border: 5px #444444 solid;
        width: 100%;
        height: 7.5rem;
        opacity: 0.8;
        display: flex;
        text-align: center;
        justify-content: center;
        background-color: #444444;
        font-size: 1.6rem;
        .bei_an {
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fffdef;
            align-items: center;
            a{
                text-decoration: none;
                color: #fffdef;
            }
            img{
                margin-left: 1rem;
                width: 8px;
                height: 8px;
            }
        }
        .profile_server{
            flex: 1;
            color: #fffdef;
            display: flex;
            justify-content: center;
            flex-direction: column;
            a{
                text-decoration: none;
                color: #fffdef;
            }
            img{
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
        }
    }
    @media screen and (min-width: 120px){
        .footer{
            font-size: 0.7rem;
            height: 3.5rem;
            .bei_an{
                height: 3.5rem;
                img{
                    width: 10px;
                    height: 10px;
                }
            }
            .profile_server{
                img{
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }

</style>